<template>
  <PageWrapper>
    <div style="height: 85vh;display: flex; flex-direction: column;">
      <div>
        <div style="display: flex;align-items: center;">
          <div style="flex: 1;display: flex;align-items: center;">
            <div style="width: 90px;text-align: right;margin: 0 10px;">当前设备：</div>
            <div style="flex: 1;display: flex;"> 
              <div style="flex: 1;margin-right: 20px;">
                <ListSelect
                  selectType="deviceSelect"
                  :checkbox="false"
                  :selectList="listSelectRef"
                  @select="handSelect"
                />
              </div>
              <Icon v-if="accessToken" style="cursor:pointer;" size="20" icon="simple-line-icons:settings"  @click="handleInfo"/> 
            </div>
          
            
          </div>
          <div style="flex: 1;text-align: right;">
            <a-button class="mr-2"  @click="handleView" v-auth="'orther:device:deviceInfo:view'">
              <Icon icon="ant-design:file-text-outlined" /> {{ t('查看设备列表') }}
            </a-button>
            <a-button type="primary" @click="handleForm({})" v-auth="'orther:device:deviceInfo:edit'">
              <Icon icon="fluent:add-12-filled" /> {{ t('新增设备') }}
            </a-button>
            
          </div>

        </div>
        <div>
          <span style="width:90px;display: inline-block;margin: 10px 10px 20px;text-align: right;">设备位置：</span> {{deviceLocation}}
        </div>
      </div>
      
      <!-- :params="queryParams" -->
      <div style="flex: 1;background: #aaa;">

        <iframe
          v-if="iframeSrc"
          @load="iframeLoad"
          :src="iframeSrc"
          width="100%"
          height="100%"
          id="ysOpenDevice"
          allowfullscreen 
        >
        </iframe>
      </div>
    </div>
    <InputForm @register="registerDrawer" />
    <infoForm @register="registerinfoDrawer"  @success="handleSuccess"/>


  </PageWrapper>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsProjMonitorList',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PageWrapper } from '/@/components/Page';
  import { schemasData } from '/@/utils/custom';
  import { listSet } from '/@/api/test/testData';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { useGlobSetting } from '/@/hooks/setting';
  import { reportData } from '/@/api/test/testData';
  import { useLoading } from '/@/components/Loading';
  import { ListSelect } from '/@/components/ListSelect';
  import { useDrawer } from '/@/components/Drawer';
  import InputForm from '/@/views/orther/device/deviceInfo/form.vue';
  import infoForm from './form.vue';
  import { deviceInfoGetToken } from '/@/api/orther/device/deviceInfo';

  const { t } = useI18n('report.ureportView');
  const { ctxPath } = useGlobSetting();
  const getTitle = ref({
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || t('监控'),
  });
  let listSelectRef = ref([]);

  let iframeSrc = ref<string>('');
  let accessToken = ref<string>('');
  let url = ref<string>('');
  let previewUrlHd = ref<string>('');
  let previewUrlSd = ref<string>('');
  let uikitTemplate = ref<string>('');
  let deviceLocation = ref<string>('');
    
  let appkey = ref<string>('');
  let secret = ref<string>('');

  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '加载中...',
  });
  
  const [registerinfoDrawer, { openDrawer:openinfoDrawer }] = useDrawer();
  const [registerDrawer, { openDrawer }] = useDrawer();

  function handleForm(record: Recordable) {
    openDrawer(true, record);
  }

  function handleInfo() {
    let data = {
      url:url.value,
      previewUrlHd:previewUrlHd.value,
      previewUrlSd:previewUrlSd.value,
      uikitTemplate:uikitTemplate.value,
    }
    openinfoDrawer(true, data);
  }

  
  function handleSuccess(data) {
    iframeSrc.value = ''
    openFullLoading();
    url.value = data.url
    uikitTemplate.value = data.uikitTemplate
    reloadData()
  }
  

  // iframe加载完成
  function iframeLoad() {
    closeFullLoading();
  }
  

  function handleView() {
    router.push({
      path: '/orther/device/deviceInfo/list',
    })
  }
  
  async function handSelect(selectData) {
    iframeSrc.value = ''
    openFullLoading();
    
    url.value = selectData[0].previewUrlHd
    previewUrlHd.value = selectData[0].previewUrlHd
    previewUrlSd.value = selectData[0].previewUrlSd
    uikitTemplate.value = selectData[0].uikitTemplate
    deviceLocation.value = selectData[0].deviceLocation

    appkey.value = selectData[0].appkey
    secret.value = selectData[0].secret
    try {
      let res =  await deviceInfoGetToken({appKey:appkey.value,appSecret:secret.value})
       accessToken.value = res.data
    } catch (error) {
      closeFullLoading();
    } finally{
      reloadData()
    }
  }

  function reloadData() {
    iframeSrc.value = `https://open.ys7.com/console/jssdk/pc.html?accessToken=${accessToken.value}&url=${url.value}&themeId=${uikitTemplate.value}`;
  }
</script>
